{% extends 'base.html' %}
{% load static %}

{% block title %}
    <title>Login to Book Manage System</title>
{% endblock title %}
{% block custom_css %}
    <link rel="stylesheet" href="{% static 'css/login.css' %}">
{% endblock custom_css %}
{% block content %}
    <form id="login_form" class='col-md-6 col-md-offset-3'>
        {% csrf_token %}
        <div class="form-group ">
            <label for="{{ login_form.username.id_for_label }}">用户名</label>
            <span class="error error_tip error_username pull-right">{% for error in login_form.username.errors %}
                {{ error }}{% endfor %}</span>
            <div class="col-sm-12">
                <input type="text" id="{{ login_form.username.id_for_label }}" class="form-control"
                       name="{{ login_form.username.html_name }}"
                       placeholder="必填">
            </div>
        </div>
        <div class="form-group">
            <label for="{{ login_form.password.id_for_label }}">密　码</label>
            <span class="error error_tip error_password pull-right">{% for error in login_form.password.errors %}
                {{ error }}{% endfor %}</span>
            <div class="col-sm-12">
                <input type="password" id="{{ login_form.password.id_for_label }}" class="form-control"
                       name="{{ login_form.password.html_name }}"
                       placeholder="必填">
            </div>
        </div>
        <br/>
        <div class="form-group">
            <input id='btn_submit' type="button" class="btn btn-primary col-md-4 col-md-offset-4"
                   value="登　陆"/>
        </div>
    </form>

{% endblock content %}
{% block custom_js %}
    <script type="text/javascript">
        $(document).ready(function () {
                $("#btn_submit").click(function () {
                        var username = $("#id_username").val();
                        var password = $("#id_password").val();
                        var csrf = $('[name="csrfmiddlewaretoken"]').val();
                        $.ajax({
                                url: '/login/',
                                method: 'POST',
                                data: {
                                    'username': username,
                                    'password': password,
                                    'csrfmiddlewaretoken': csrf,
                                },
                                success: function (res) {
                                    console.log(res);
                                    if (res.status == 'success') {
                                        window.location.href = '/book_show/';
                                    } else if (res.status == 'failed') {
                                        if (res['error_field']['username']) {
                                            $(".error_username").html('用户名错误')
                                        } else {
                                            $(".error_password").html('密码错误')
                                        }
                                    }
                                }
                            }
                        )
                    }
                )
            }
        )
    </script>
{% endblock custom_js %}
